<template>
	<div class="main">
		<div>
			<div class="content">
				<div class="Genericpadding">
					<!-- 幻燈 -->
					<div v-if="ads.length > 0" class="indexconta">
						<el-carousel :interval="5000" arrow="always">
							<el-carousel-item v-for="(item, index) in ads" :key="index">
								<a :href="item.url" target="_blank" rel="noopener noreferrer">
									<div class="TopRectangles indexbannar">
										<el-image style="width: 100%; height: 100%" :src="item.img" fit="fill"></el-image>
										<div class="Centertheimage adsbox">
											<div class="adsflex">
												<div>{{ item.title }}</div>
												<div>{{ item.text }}</div>
											</div>
										</div>
									</div>
								</a>
								<!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
							</el-carousel-item>
						</el-carousel>
					</div>

					<el-skeleton v-else class="indexconta" animated>
						<template #template>
							<el-skeleton-item class="indexconta" variant="image" />
						</template>
					</el-skeleton>
				</div>

				<el-carousel class="Genericpadding" height="20px" direction="vertical" indicator-position="none">
					<el-carousel-item v-if="arclist" v-for="(item, index) in arclist" :key="index">
						<div class="articlebt">
							<div class="Horizontalspacing minxgap">
								<div class="iconfont icon-gonggao center Green"></div>
								<div class="left">{{ $t('message.NOTICE') }}</div>
								<div class="listtruncate-text turngreen"> {{ item.title }}</div>
							</div>
							<div class="left Horizontalspacing interval minfont grey center">
								<div class="Horizontalspacing minxgap"
									><span>{{ $t('message.DATE') }}</span
									><span>{{ item.Creationtime }}</span></div
								>
								<div class="Horizontalspacing minxgap"
									><span>{{ $t('message.View') }}</span
									><span>{{ item.PageView }}</span></div
								>
							</div>
						</div>
					</el-carousel-item>
					<el-skeleton v-else animated>
						<template #template>
							<el-skeleton-item variant="h3" style="width: 100%" />
						</template>
					</el-skeleton>
				</el-carousel>
				<div class="Genericpadding Intervalvertical">
					<!-- 放置頂課程  直播和錄播 -->
					<div>{{ $t('message.PopularCourses') }}</div>
					<div class="Randomcours">
						<div v-if="coursttabe.length > 0" v-for="(item, index) in coursttabe" :key="index" class="TopRectangle">
							<router-link :to="/course/ + item.alias + '/' + item.id">
								<el-image class="TopPicture" :src="item.thumbnail" lazy>
									<template #error>
										<div class="image-slots iconfont icon-jiazaitupian"></div>
									</template>
								</el-image>

								<div class="Toppositioning Horizontalspacing minixgap">
									<span class="Green coretitle">[{{ item.pidname }}]</span>
									<span class="couretitle">{{ item.title }}</span>
								</div>
							</router-link>
						</div>
						<div v-else class="Randomcours">
							<el-skeleton v-for="index in 3" :key="index" class="TopRectangle" animated>
								<template #template>
									<el-skeleton-item class="TopRectangle" variant="image" />
								</template>
							</el-skeleton>
						</div>
					</div>
				</div>
				<div class="ThinLineLayout">
					<div class="Genericpadding">
						<div class="QArectangle">
							<div class="Horizontalspacing interval">
								<div class="qzsolld" :class="{ qzsolldav: tesorting == 0 }" @click=";(tesorting = 0), (tosort = 'time'), tosortto()">{{ $t('message.ALL') }}</div>
								<div class="qzsolld" :class="{ qzsolldav: tesorting == 1 }" @click=";(tesorting = 1), (tosort = 'time'), (count = 5), tosortto()">{{ $t('message.SortbyTime') }}</div>
								<div class="qzsolld" :class="{ qzsolldav: tesorting == 2 }" @click=";(tesorting = 2), (tosort = 'popularity'), (count = 5), tosortto()">{{ $t('message.sortbypopularity') }}</div>
							</div>
						</div>
					</div>
					<ul class="ThinLineLayout">
						<!-- 文章1 -->
						<router-link v-if="arclist" v-for="(item, index) in arclist.slice(0, Math.min(count, arclist.length))" :key="index" :to="'/article/' + item.alias + '/' + item.id">
							<li class="Genericpadding coreslistli navwidth">
								<el-image class="PostThumbnails" :src="item.thumbnail ? item.thumbnail : ''" lazy>
									<template #error>
										<div class="image-slot iconfont icon-jiazaitupian"></div>
									</template>
								</el-image>

								<div class="ArticleList">
									<div class="Horizontalspacing minxgap ArticleTitlep">
										<el-tag effect="plain" size="small">热门</el-tag>
										<span class="turngreen Widthlimit">{{ item.title }}</span>
									</div>
									<span class="minfont grey Widthlimits">{{ item.description }}</span>
									<div class="articlebt minfont">
										<div class="Horizontalspacing interval">
											<div class="Horizontalspacing minixgap">
												<el-avatar class="pimgmins center" :src="item.user.Avatar" :size="60">
													<div class="image-slot iconfont icon-setting-role"></div>
												</el-avatar>

												<span v-if="item.user.nickname" class="center">{{ item.user.nickname }}</span>
												<span v-else class="center">{{ item.user.username }}</span>
											</div>
											<div class="courspidname grey center">{{ item.pidname }}</div>
										</div>
										<div class="Horizontalspacing interval grey">
											<div class="Horizontalspacing minixgap">
												<span class="courspidname center">{{ $t('message.DATE') }}</span>
												<span class="center">{{ item.Creationtime }}</span>
											</div>
											<div class="courspidname Horizontalspacing minixgap">
												<span class="center">{{ $t('message.like') }}:</span>
												<span class="center">{{ item.Like.length }}</span>
											</div>
											<div class="courspidname Horizontalspacing minixgap">
												<span class="center">{{ $t('message.View') }}</span>
												<span class="center">{{ item.PageView }}</span>
											</div>
										</div>
									</div>
								</div>
							</li>
						</router-link>
						<!-- 文章2 -->
						<!-- 文章骨架 -->
						<div v-else>
							<el-skeleton v-for="index in 10" :key="index" class="Genericpadding coreslistli navwidth" animated>
								<template #template>
									<div>
										<el-skeleton-item variant="image" class="image-slot" />
									</div>
									<div class="ArticleList" style="flex: 1">
										<el-skeleton-item variant="h3" style="width: 100%" />
										<div class="courspidname">
											<el-skeleton-item variant="h3" style="width: 100%" />
											<el-skeleton-item variant="h3" style="width: 100%" />
											<el-skeleton-item variant="h3" style="width: 100%" />
										</div>
										<el-skeleton-item variant="h3" style="width: 100%" />
									</div>
								</template>
							</el-skeleton>
						</div>

						<el-skeleton v-if="condition" v-for="index in 2" :key="index" class="Genericpadding coreslistli navwidth" animated>
							<template #template>
								<div>
									<el-skeleton-item variant="image" class="image-slot" />
								</div>
								<div class="ArticleList" style="flex: 1">
									<el-skeleton-item variant="h3" style="width: 100%" />
									<div class="courspidname">
										<el-skeleton-item variant="h3" style="width: 100%" />
										<el-skeleton-item variant="h3" style="width: 100%" />
										<el-skeleton-item variant="h3" style="width: 100%" />
									</div>
									<el-skeleton-item variant="h3" style="width: 100%" />
								</div>
							</template>
						</el-skeleton>
					</ul>
					<div class="Genericpadding" @click=";(count += 2), More()">
						<div class="abstracts">
							<p class="center">{{ $t('message.seemore') }}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="left"> <left v-my-directive :data-title="title" :data-description="description"></left> </div>
	</div>
</template>
<script>
	import left from './../components/left'
	import { dataRequest as api } from '@/api/api'
	export default {
		name: 'name',
		components: {
			// 组件
			left,
		},
		data() {
			return {
				//返回值
				ads: [],
				coursttabe: [],
				title: '',
				description: '我们提供专业的区块链培训和开发工具服务，学习区块链技术，获取区块链工具源码，欢迎加入区块链开发社区。',
				arclist: '',
				tesorting: 0,
				count: 10,
				qzsolldav: 'qzsolldav',
				tmime: true,
				page: 6,
				tosort: 'time',
				offset: 'DESC',
				moreoffset: 'DESC',
				condition: false,
			}
		},
		methods: {
			// 获取广告
			async getads() {
				let array = await api(['fetchads', { type: 'banner' }], 'v2', 'query')
				console.log(array)
				if (array.code == 200) {
					this.ads = array.data
				}
			},
			// 获取课程
			async course() {
				let array = await api(['Coursepagination', { Stickie: '1' }])
				// console.log(array)
				if (array.code == 200) {
					this.coursttabe = array.data
				}
			},
			// 函数
			// 获取文章 1 第二页就是10个
			//順序怎麽切換

			async tosortto() {
				let array = await api(['getarticlepage', { perPage: this.count, page: 1, offset: this.offset, tosort: this.tosort, thumbnail: 'hasValue' }])
				this.moreoffset = this.offset
				this.offset = this.offset === 'DESC' ? 'ASC' : 'DESC'
				if (array.code == 200) {
					array = array.data
					this.arclist = array
					this.setvivws()
				}
			},
			async getdata() {
				// 正序 還是順序
				// 根據哪個表排序
				let array = await api(['getarticlepage', { perPage: this.count, page: 1, offset: this.offset, tosort: this.tosort, thumbnail: 'hasValue' }])

				if (array.code == 200) {
					array = array.data
					this.arclist = array
					this.setvivws()
				}
			},
			// 獲取後面的
			async More() {
				this.condition = true
				let array = await api(['getarticlepage', { perPage: 2, page: this.page, offset: this.moreoffset, tosort: this.tosort, thumbnail: 'hasValue' }])
				if (array.code == 200) {
					array = array.data
					this.condition = false
					this.arclist.push(...array)
					this.page += 1
					this.setvivw()
				}
			},
			// 新增浏览量
			setvivws() {
				let arr = []
				for (let i = 0; i < this.count && i < this.arclist.length; i++) {
					arr.push(this.arclist[i].id)
				}
				api(['acbrowsing', arr])
			},
			// 新增浏览量
			setvivw() {
				let arr = []
				for (let i = this.count - 2; i < this.count && i < this.arclist.length; i++) {
					arr.push(this.arclist[i].id)
				}
				api(['acbrowsing', arr])
			},
		},
		mounted() {
			// 生命周期:
			this.getads()
			this.getdata()
			this.course()
		},
		updated() {},
	}
</script>

<style scoped>
	.adsflex {
		display: flex;
		flex-direction: column;
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		height: 200px;
		gap: 20px;
	}
	.adsflex > :first-child {
		color: #f2f6fc;
		font-size: 38px;
		font-weight: bold;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	}
	.adsflex > :nth-child(2) {
		color: #f2f6fc;
		font-size: 30px;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	}
	.adsbox {
		border-radius: 4px;
		width: 700px;
		height: 200px;
		background-color: rgba(144, 147, 153, 0.6);
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		/* border: 1px solid rgb(255, 255, 255, 0.6); */
	}
	/* .el-carousel__item h3 {
		color: #475669;
		background-color: #99a9bf;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
		text-align: center;
	} */

	.demonstration {
		display: block;
		color: var(--el-text-color-secondary);
		font-size: 14px;
		margin-bottom: 20px;
	}

	.image-slot {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200px;
		height: 150px;
		background: var(--el-fill-color-light);
		color: var(--el-text-color-secondary);
		font-size: 30px;
	}

	.image-slot {
		font-size: 30px;
	}
	.pimgmins .image-slot {
		font-size: 14px;
	}
	.qzsolldav {
		color: var(--primary-color);
	}

	.Widthlimit {
		white-space: nowrap; /* 防止换行 */
		overflow: hidden; /* 隐藏超出部分 */
		text-overflow: ellipsis; /* 添加省略号 */
		width: 560px; /* 设置容器宽度 */
	}
	.Widthlimits {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3; /* 设置最大显示行数 */
		overflow: hidden;
		text-overflow: ellipsis;
		width: 597px; /* 设置容器宽度 */
		white-space: normal; /* 允许换行 */
	}
	.listtruncate-text {
		white-space: nowrap; /* 防止换行 */
		overflow: hidden; /* 隐藏超出部分 */
		text-overflow: ellipsis; /* 添加省略号 */
		width: 420px; /* 设置容器宽度 */
	}
	.couretitle {
		white-space: nowrap; /* 防止换行 */
		overflow: hidden; /* 隐藏超出部分 */
		text-overflow: ellipsis; /* 添加省略号 */
		/* width: 175px; 设置容器宽度 */
	}

	.navwidth {
		width: 860px;
	}
	.Randomcours {
		display: flex;
		flex-wrap: wrap;
		/* 允许标签自动换行 */
		/* 容器宽度为200px */
		justify-content: space-between;

		gap: 20px;
	}
</style>
<style>
	.indexbannar {
		width: 820px;
		height: 300px;
	}
	.coreslistli {
		display: flex;
		flex-direction: row;
		gap: 20px;
	}
</style>
<style>
	@media screen and (max-width: 860px) {
		.indexbannar {
			width: 3.35rem;
			height: 1.2232rem;
		}
		.el-carousel__container {
			height: 1.2232rem;
		}
		.ArticleList {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;
		}
	}
</style>
<style scoped>
	@media screen and (max-width: 860px) {
		.indexconta {
			width: 3.35rem;
			height: 1.2232rem;
			position: relative;
			overflow: hidden;
		}
		.adsbox {
			border-radius: 0.04rem;
			width: 3rem;
			height: 1rem;
			background-color: rgba(144, 147, 153, 0.6);
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			/* border: 1px solid rgb(255, 255, 255, 0.6); */
		}
		.adsflex {
			height: 1rem;
			gap: 0.2rem;
		}
		.adsflex > :first-child {
			font-size: 0.2rem;
			font-weight: bold;
			text-shadow: 0.02rem 0.02rem 0.02rem rgba(0, 0, 0, 0.5);
		}
		.adsflex > :nth-child(2) {
			color: #f2f6fc;
			font-size: 0.15rem;
			text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.5);
		}
		.navwidth {
			width: 100vw;
		}
		.image-slots {
			width: 1.625rem;
			height: 162.5rem;
			font-size: 0.3rem;
		}
		.TopPicture {
			height: 1.625rem;
			width: 1.625rem;
		}
		.TopRectangle {
			width: 1.625rem;
			height: 1.625rem;
			border-radius: 0.04rem;
		}
		.Randomcours {
			display: flex;
			flex-wrap: wrap;
			/* 允许标签自动换行 */
			/* 容器宽度为200px */
			/* justify-content: space-between; */

			gap: 0.1rem;
		}
		.coretitle {
			display: none;
		}
		.image-slot {
			width: 1rem;
			height: 0.75rem;

			font-size: 0.3rem;
		}
		.Widthlimits {
			display: none;
		}
		.courspidname {
			display: none;
		}
		.coreslistli {
			gap: 0.1rem;
		}
		.Widthlimit {
			width: 1.9rem; /* 设置容器宽度 */
		}
		.listtruncate-text {
			width: 3.1rem; /* 设置容器宽度 */
		}
	}
</style>
